<template>
  <view class="tabBar">
    <view v-for="(item,index) in tabBarList" :key="index" :class="['tab-item',{'mid-button':index == 2}]"
      @click="tabBarChange(index,item.url)">
      <image :src="current == index?item.selectIcon: item.icon"></image>
      <view :class="['tab-title',{'activeTitle':current == index}]">{{item.name}}</view>
    </view>
  </view>
</template>

<script>
  export default {
    props: {
      current: {
        type: Number,
        default: 0 // 默认为首页
      }
    },
    data() {
      return {
        // tabbar 栏
        tabBarList: [{
          name: "充电柜", // name
          icon: "/static/charging-pile-2.png", // 图标
          selectIcon: "/static/charging-pile-1.png", // 选中图标
          url: "/pages/home/home", // 页面路径
        }, {
          name: "消息",
          icon: "/static/message2.png",
          selectIcon: "/static/message1.png",
          url: "/pages/message/message",
        }, {
          name: "",
          icon: "/static/scan-code.png",
          selectIcon: "/static/scan-code.png",
          url: "",
        }, {
          name: "订单",
          icon: "/static/order2.png",
          selectIcon: "/static/order1.png",
          url: "/pages/order/order",
        }, {
          name: "我的",
          icon: "/static/my2.png",
          selectIcon: "/static/my1.png",
          url: "/pages/my/my",
        }]
      }
    },
    mounted() {
      uni.hideTabBar();
    },
    methods: {
      tabBarChange(index,path) {
        let token = uni.getStorageSync('token') || null;
        if (!token && index>0) {
          uni.showModal({
            title: '提示',
            content: '需要先授权登录哦，是否继续？',
            success: function(res) {
              if (res.confirm) {
                uni.reLaunch({
                  url: '/pages/login/login'
                })
              }
            }
          })
          return;
        }
        if (path) {
          uni.switchTab({
            url: path
          })
          return;
        }
        this.doScan();
      },
      doScan() {
        uni.scanCode({
          onlyFromCamera: true,
          scanType: 'qrCode',
          success: function(res) {
            let str = res.result;
            let index = str.lastIndexOf('/');
            let code = str.substr(index + 1, str.length);

            uni.navigateTo({
              url: '/pages/rechargeCabinet/rechargeCabinet?code=' + code
            })
          },
          fail: (err) => {
            // this.$Toast.error('扫码失败！');
          }
        });
      },
    }
  }
</script>

<style lang="scss" scoped>
  .tabBar {
    width: 100%;
    height: 120rpx;
    display: flex;
    align-items: center;
    position: fixed;
    left: 0;
    bottom: 0;
    background-color: #FFFFFF;
    border-top: 1px solid #F8F8F8;

    .tab-item {
      width: 25%;
      display: flex;
      flex-direction: column;
      align-items: center;

      .tab-title {
        font-size: 24rpx;
        color: #ababab;
      }

      .activeTitle {
        color: #1977d2;
      }

      image {
        width: 46rpx;
        height: 46rpx;
        padding-bottom: 10rpx;
      }
    }

    .mid-button {
      width: 20%;
      position: relative;
      top: -42rpx;
      background: #fff;
      padding-top: 20rpx;
      border-radius: 50%;

      image {
        width: 80rpx;
        height: 80rpx;
      }
    }

  }
</style>
